<template>
  <el-form ref="elFormRef" :model="modelValue" v-bind="$attrs" label-width="100px">
    <el-row :gutter="gutter">
      <el-col v-for="item in list" :key="item.name" :span="item.span || 24">
        <el-form-item :prop="item.name" :label="item.label">
          <template v-if="item.labelSlot" #label>
            <slot :name="item.labelSlot"></slot>
          </template>
          <template v-if="item.slot">
            <slot :name="item.slot"></slot>
          </template>
          <component
            v-else
            v-model="modelValue[item.name]"
            :is="getName(item.tag)"
            v-bind="item?.attrs"
            :options="item.options"
          ></component>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import testSelect from './test-select.vue'
import type { Component } from 'vue'
defineOptions({
  name: 'testForms'
})
const props = defineProps({
  modelValue: {},
  list: [],
  gutter: {
    default: 16
  }
})
console.log(props.list)
const componentList: {
  [propName: string]: Component
} = {
  testSelect
}
const getName = (tag: string) => {
  if (componentList[tag]) return componentList[tag]
  return tag
}
const elFormRef = ref()
defineExpose({
  elFormRef
})
</script>
<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
</style>
